<template>
  <div class="tip-panel-modal">
    <je-modal
      v-model:visible="isShow"
      button-align="right"
      :resize="false"
      title="解释说明"
      :width="tipType == 'height' ? '420px' : null"
      :height="tipType == 'height' ? 'auto' : null"
      :maximizable="false"
      :ok-button="cancelButton"
      @close="cancelButton"
    >
      <div v-show="tipType == 'location'">
        <div style="margin-bottom: 20px">面板中不同的扩展位置显示的效果如下：</div>
        <div v-for="(item, index) in recordData" :key="index" class="tip-extend-item">
          <div>{{ index + 1 }}.{{ item.text }}，如图显示：</div>
          <div><img :src="item.url" /></div>
        </div>
      </div>
      <div v-show="tipType == 'height'">
        “宽/高”为设置面板在列表中不同位置展示的尺寸，支持输入数值PX，百分比%，可根据面板的位置设置面板展示的宽/高。
        例如：<br />
        列表、外部的上方或下方区域，可设置面板的“高度”，输入：200、50%等，输入其他字符会出现无法解析展示内容；<br />
        列表、外部的左方或右方区域，可设置面板的“宽度”，输入：200、50%等，输入其他字符会出现无法解析展示内容。
      </div>
    </je-modal>
  </div>
</template>

<script>
  import { ref, defineComponent } from 'vue';
  import { Modal } from '@jecloud/ui';
  import listBottom from './../img/extend/listBottom.png';
  import listLeft from './../img/extend/listLeft.png';
  import listTop from './../img/extend/listTop.png';
  import listRight from './../img/extend/listRight.png';
  import outBottom from './../img/extend/outBottom.png';
  import outLeft from './../img/extend/outLeft.png';
  import outRight from './../img/extend/outRight.png';
  import outTop from './../img/extend/outTop.png';

  export default defineComponent({
    name: 'TipViewPanel',
    components: {
      JeModal: Modal,
    },
    props: {
      visble: {
        type: Boolean,
        default: false,
      },
      type: String,
    },
    emits: ['changeTipShow'],
    setup(props, { emit }) {
      const isShow = ref(props.visble);
      const recordData = ref([
        { url: listTop, text: '列表上方' },
        { url: listBottom, text: '列表下方' },
        { url: listLeft, text: '列表左方' },
        { url: listRight, text: '列表右方' },
        { url: outTop, text: '外部上方' },
        { url: outBottom, text: '外表下方' },
        { url: outLeft, text: '外部左方' },
        { url: outRight, text: '外部右方' },
      ]);
      const tipType = ref(props.type);
      const methods = {
        // 点击取消
        cancelButton() {
          // 1刷新列表
          emit('changeTipShow');
        },
      };
      return {
        isShow,
        ...methods,
        recordData,
        tipType,
      };
    },
  });
</script>
<style lang="less">
  .tip-panel-modal {
    > .je-modal--body {
      padding: 0 20px !important;
    }
  }
</style>
<style lang="less" scoped>
  .tip-panel-modal {
    color: #3f3f3f;
    .tip-extend-item {
      margin-bottom: 20px;
      img {
        margin-top: 10px;
        width: 100%;
      }
    }
  }
</style>
